<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 
        零、1.axios的封装【请求地址】 和 拦截器统一处理异常 request.js
            2.api.js统一管理接口地址
            3.路由的钩子函数: this.$router.onReady(()=>{})
            4.在js文件中操作vuex
            5.全局变量，在main.js中：Vue.prototype.变量名 = 值;
                              如:Vue.prototype.imgBaseUrl = "http://sc.wolfcode.cn";
                    在任何组件获取:this.变量名 或者 {{变量名}} 来获取
                              如: {{ imgBaseUrl }}
                                  this.imgBaseUrl
            6.POST的请求统一携带请求头:config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
            POST的请求传参: 序列化参数,node提供的qs模块对post参数进行序列化操作
              1.引入node提供的序列化模块：import qs from 'qs';
              2.对参数进行序列化操作:qs.stringify(params)
              如：
                //测试qs.stringify()
              //作用：对post请求，需要参数进行序列化即对象序列化
              // console.log("qs.stringify():",qs.stringify({name:'zhangsan',age:18}));
              // 经过qs.stringify()把对象转换为：name=zhangsan & age=18
            所有请求在发送请求在拦截器中请求头中统一携带token:config.headers['x-auth-token'] = token;
            7.渲染https的图片路径,会显示不了
              解决方案:防止服务器检查防盗用链接
              在public/index.html中加：<meta name="referrer" content="no-referrer" />
            8.vue-router@3.0.7开始之后的版本都会出现：
              问题： 重复点击同一个路由出现的报错问题解决
              解决方案：
                1.vue-router降版本处理(但不推荐)
                2.直接在编程式路由的push方法最后添加异常捕获,但不做处理
                  如：this.push("/home").catch(err=>{})
                  但是每个路由都得加，不推荐
                3.直接修改原型方法push(推荐)
                // 把这段代码直接粘贴到router/index.js中的Vue.use(VueRouter)之前
                const originalPush = VueRouter.prototype.push;
                VueRouter.prototype.push = function(location) {
                  return originalPush.call(this, location).catch(err => {})
                };
            9.404页面配置
            10.vue解决跨域
            11.配置环境变量

        一、手机登录
        1.逻辑：判断手机号码，判断滑块验证码，判断手机短信验证码，三者都成立才发送登录请求。
                请求发送成功后(关闭登录模态框，提示登录成功，把登录按钮切换为购物车按钮，存token到本地存储中)
        2.如何切换购物车按钮？
        vuex中存储是否登录的状态，topbar中根据登录的状态来控制按钮的显示隐藏。登录成功后调用mutations方法修改状态

        二、封装Toast提示组件
        1.Toast.vue 布局样式
        2.Vuex中存储共享的数据(是否显示，显示内容，显示类型的图标)
        3.实现定时关闭 actions
        4.增加过渡效果 transition组件

        三、微信二维码登录
        二维码展示
          1.在public/index.html引入js
          2.提供显示二维码容器 增加id属性
          3.需要显示的时候实例化wxLogin()
              修改样式？
              3.1 编写样式
              3.2 通过工具代码将样式转换为base64格式
              3.3 给href属性设置值
        微信扫码后实现登录
            4.1微信扫码后会跳到当前路由且地址栏会多一个code
                注意：如果没有code,跳转失败,在浏览器上有一个禁止弹框改为允许弹框
            4.2在公共组件通过路由对象的query获取code的值
            4.3携带地址栏的code值发送微信扫码登录的请求给后端  响应 uuid 和 code 和 token 和 Msg
            4.4code状态码有3种情况：
                4.4.1 code==0【登录成功】
                  4.4.1.1 提示:登录成功
                  4.4.1.2 把token存储到本地
                  4.4.1.3 通过编程路由跳转到当前路由路径即可。删除地址栏的code,防止重复发送微信登录的请求。
                  4.4.1.4 关闭登录模态框
                  4.4.1.5 把登录按钮改为购物车按钮

                4.4.2 code==400 【code错误：二维码超时2min , code已经使用过了，再次发送  都会出现code错误】
                  4.4.2.1 提示：二维码已失效，请重新扫码登录
                  4.4.2.2 弹出登录模态框并通过updated调用生成微信二维码的方法,显示二维码
                    
                4.4.3 code==407 【首次使用微信扫码登录】
                  4.4.3.0 在Topbar公共组件中把uuid存储到本地存储中
                  4.4.3.1 提示:用户需要绑定手机号码，并弹出登录模态框的手机号码登录
                  4.4.3.2 然后再Topbar组件中删除地址栏的code
                  4.4.3.3 在Login组件中
                    1.获取本地存储的uuid
                    2.在通过手机号码登录的方式。发送微信和手机号码绑定的请求。跟之前的手机号码登录一样【判断手机号码，判断滑块验证码，判断手机短信验证码，三者都成立才发送登录请求。】，但是需要携带一个 uuid的参数，且请求路径不同。
                  4.4.3.4 响应 code,msg,token
                    1.把token存储到本地中，
                    2.删除uuid,不然每次登录都携带uuid，防止会重复发送手机和微信关联的请求。
                    3.关闭模态框
                    4.把登录按钮变为购物车按钮

        5.获取用户的信息
          5.0所有请求在拦截器中统一携带token
          5.1在topbar的钩子函数判断是否有token,有token已登录,发送获取用户信息的请求
          5.2响应的信息存储到vuex中去共享,方便在所有组件中可以获取
          5.3解决手动删除token变更登录状态和用户的信息,通过watch监听路由路径的变化,再判断本地存储是否有token
        6.手动删除本地token,此时是未登录状态，要变更登录状态和用户信息
          方式1：在公共组件,如:Topbar组件通过watch监听路由路径的变化，获取本地存储的token，无token，则变更登录状态和用户信息
          方式2：组件重载：
                1.在App.vue组件中对Topbar组件设置:key属性
                2.然后通过watch监听路由路径的变化,且当前路由路径是非 /,然后key属性的值+1
                  否则会出现: 有个bug，出现两次弹框解决方案
                3.当属性的值key变化且唯一,就会触发公共组件Topbar的钩子函数
                4.在Topbar钩子函数中获取本地存储token,无token,则变更登录状态和用户信息
                

        7.解决图片路径拼接的方式
          方式1：拦截器
          方式2：在main.js中设置全局变量，然后在其他组件可以直接跟组件data中的数据一样去调用
                在main.js中设置全局变量:Vue.prototype.imgBaseUrl = "http://sc.wolfcode.cn";
                在任意组件中调用: this.变量名 或者 {{变量名}} 来获取

        8.导航守卫 也叫 路由守卫
          作用:对路由进行拦截
        
        9. :key 属性实现组件重载
        注意: 不是只有v-for才可以使用key属性,在任何地方都可以实现
        用处1: v-for
        用处2: 实现组件重载

        10. 全部商品页面：滚动加载+节流
     -->
</body>

</html>